<template>
    <el-form :model="form" label-width="120px">
        <el-form-item label="标签 名称">
            <el-input :disabled="readOnly" v-model="form.courseTagName" />
        </el-form-item>
        <el-form-item label="父级 标签">
            <el-tree-select :aria-disabled="readOnly" v-model="form.courseTagParentId"  :data="parentTagList" check-strictly
                :props="parentTagListProps" />
        </el-form-item>
        <el-form-item label="标签 状态">
            <el-switch :disabled="readOnly" v-model="form.courseTagStatus"
                style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;" :active-value=1
                :inactive-value=0 />
        </el-form-item>
        <el-form-item v-if="!readOnly">
            <el-button type="primary" @click="onSubmit()">创 建</el-button>
            <el-button @click="clear()">清 空</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
import { reactive, ref } from '@vue/reactivity';
import { ElMessage, ElMessageBox } from 'element-plus'
export default {
    name: 'createCourseTag',
    props: ['parentTagList'],
    setup(props) {
        const form = reactive({
            courseTagName: '',
            courseTagParentId: 1,
            courseTagStatus: 1
        })

        const parentTagList = props.parentTagList;
        const parentTagListProps = {
            children: 'tagList',
            value: 'courseTagId',
            label: 'courseTagName'
        }
        //只读
        const readOnly = ref(false);

        return { form, parentTagList, parentTagListProps,readOnly };
    },
    methods: {
        clear() {
            this.form = {
                courseTagName: '',
                courseTagParentId: 1,
                courseTagStatus: 1
            };
        },
        onSubmit() {

            if (null == this.form.courseTagName || this.form.courseTagName == '') {
                //检查标签名称是否为空
                ElMessage.warning('标签名称不能为空');
                return;
            }
            if (null == this.form.courseTagParentId || this.form.courseTagParentId <= 0) {
                //见擦父级id是否为空
                ElMessage.warning('父标签不能为空');
                return;
            }
            if (null == this.form.courseTagStatus || this.form.courseTagStatus < 0 || this.form.courseTagStatus > 1) {
                //检查标签状态是否为空
                ElMessage.warning('标签状态异常');
                return;
            } else {
                //添加标签信息
                this.inesrtCourseTag();
            }


        },
        inesrtCourseTag() {
            let formData = new FormData();
            formData.append('courseTag', {
                courseTagName: this.form.courseTagName,
                courseTagParentId: this.form.courseTagParentId,
                courseTagStatus: this.form.courseTagStatus
            })
            let config = {
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            }
            this.axios.post('/api/createCourseTag', {
                courseTagName: this.form.courseTagName,
                courseTagParentId: this.form.courseTagParentId,
                courseTagStatus: this.form.courseTagStatus
            }).then((response) => {
                if (response.data.code == 200) {
                    ElMessage.success(response.data.msg);
                    this.readOnly = true;
                } else {
                    ElMessage.warning(response.data.msg);
                }
            }).catch(function (error) {
                console.log(error);
            })
        }
    }
}
</script>

<style>
</style>